import Taro, {Component} from '@tarojs/taro'
import {Text, View} from '@tarojs/components'

export default class Xhl3 extends Component {
  constructor (props) {
    super(props)
    this.state = { date: new Date() }
  }

  config = {
    navigationBarTitleText: '组件化 & Props & 生命周期 & State'
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    )
  }

  componentWillUnmount() {
    clearInterval(this.timerID)
  }

  tick () {
    this.setState({
      date: new Date()
    }, () => {
      // 在这个函数内你可以拿到 setState 之后的值
    });
  }

  render() {
    return (
      <View>
        <View>1. 组件可以将 UI 切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。</View>
        <View>2. 一个声明的组件决不能修改它自己的 props。</View>
        <View>3. 当组件输出到 DOM 后会执行 componentDidMount() 钩子</View>
        <View>4. 当组件卸载后会执行 componentWillUnmount() 钩子</View>
        <View>
          <Text>Hello, world!</Text>
          <Text>现在的时间是 {this.state.date.toLocaleTimeString()}.</Text>
        </View>
        <View>5. 使用 setState()更新状态</View>
        <View>6. 状态更新一定是异步的，你不能在 setState 马上拿到 state 的值，正确的做法在 setState 的第二个参数传入一个 callback</View>
        <View>7. state 更新会被合并，合并是浅合并</View>
      </View>
    )
  }
}
